﻿@page "/circular-gauge/pointer-image"

@using Syncfusion.Blazor.CircularGauge
@using Newtonsoft.Json;

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample visualizes the shot-put distance covered by the athletes by using the image pointer in gauge. </p>
</SampleDescription>
<ActionDescription>
   <p> In this example, you can see how to use the pointer image for an axis in the circular gauge. Pointer value points out the the actual value set in the circular gauge. You can customize the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointers.html'>CircularGaugePointers</a></code> to improve the appearance of the gauge.</p>
    <br><p> In this sample, a pointer with an image is used to show the shot-put distance thrown by the player.</p>
    <p>More information on the circular gauge can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/circular-gauge/pointers'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfCircularGauge CenterY="57%" Title="Shot Put Distance" Height="750px">
        <CircularGaugeAxes>
            <CircularGaugeAxis StartAngle="200" EndAngle="130" Minimum="0" Maximum="14" Radius="80%">
                <CircularGaugeAxisLineStyle Width="0.001" Color="#1d1d1d"/>
                <CircularGaugeAxisMajorTicks Width="0.01"/>
                <CircularGaugeAxisMinorTicks Width="0.01"/>
                <CircularGaugeAxisLabelStyle>
                    <CircularGaugeAxisLabelFont Size="0px"/>
                </CircularGaugeAxisLabelStyle>
                <CircularGaugePointers>
                    <CircularGaugePointer Type="PointerType.Marker" Value="12" MarkerShape="GaugeShape.Image" ImageUrl="images/circular-gauge/football.png" Radius="100%" MarkerWidth="28" MarkerHeight="28">
                        <CircularGaugePointerAnimation Enable="true" Duration="1500"/>
                    </CircularGaugePointer>
                    <CircularGaugePointer Type="PointerType.Marker" Value="11" MarkerShape="GaugeShape.Image" ImageUrl="images/circular-gauge/basketball.png" Radius="70%" MarkerWidth="28" MarkerHeight="28">
                        <CircularGaugePointerAnimation Enable="true" Duration="1200"/>
                    </CircularGaugePointer>
                    <CircularGaugePointer Type="PointerType.Marker" Value="10" MarkerShape="GaugeShape.Image" ImageUrl="images/circular-gauge/golf-ball.png" Radius="40%" MarkerWidth="28" MarkerHeight="28">
                        <CircularGaugePointerAnimation Enable="true" Duration="900"/>
                    </CircularGaugePointer>
                    <CircularGaugePointer Type="PointerType.Marker" Value="12" MarkerShape="GaugeShape.Image" ImageUrl="images/circular-gauge/athletics.png" Radius="0%" MarkerWidth="90" MarkerHeight="90">
                        <CircularGaugePointerAnimation Enable="true" Duration="0"/>
                    </CircularGaugePointer>
                    <CircularGaugePointer Type="PointerType.Marker" Value="0" MarkerShape="GaugeShape.Image" ImageUrl="images/circular-gauge/girl1.png" Radius="100%" MarkerWidth="28" MarkerHeight="28">
                        <CircularGaugePointerAnimation Enable="true" Duration="1500"/>
                    </CircularGaugePointer>
                    <CircularGaugePointer Type="PointerType.Marker" Value="0" MarkerShape="GaugeShape.Image" ImageUrl="images/circular-gauge/man1.png" Radius="70%" MarkerWidth="28" MarkerHeight="28">
                        <CircularGaugePointerAnimation Enable="true" Duration="1500"/>
                    </CircularGaugePointer>
                    <CircularGaugePointer Type="PointerType.Marker" Value="0" MarkerShape="GaugeShape.Image" ImageUrl="images/circular-gauge/man2.png" Radius="40%" MarkerWidth="28" MarkerHeight="28">
                        <CircularGaugePointerAnimation Enable="true" Duration="1500"/>
                    </CircularGaugePointer>
                </CircularGaugePointers>
                <CircularGaugeRanges>
                    <CircularGaugeRange Start="0" End="12" Radius="105%" Color="#01aebe" StartWidth="25" EndWidth="25"/>
                    <CircularGaugeRange Start="0" End="11" Radius="75%" Color="#3bceac" StartWidth="25" EndWidth="25"/>
                    <CircularGaugeRange Start="0" End="10" Radius="45%" Color="#ee4266" StartWidth="25" EndWidth="25"/>
                </CircularGaugeRanges>
                <CircularGaugeAnnotations>
                    <CircularGaugeAnnotation Content="12 M" Radius="105%" Angle="95" ZIndex="1"/>
                    <CircularGaugeAnnotation Content="11 M" Radius="77%" Angle="78" ZIndex="1"/>
                    <CircularGaugeAnnotation Content="10 M" Radius="45%" Angle="65" ZIndex="1"/>
                    <CircularGaugeAnnotation Radius="108%" Angle="190" ZIndex="1">
                        <ContentTemplate>
                            <div class="annotationText"><span class="templateAlign">Doe</span></div>
                        </ContentTemplate>
                    </CircularGaugeAnnotation>
                    <CircularGaugeAnnotation Radius="80%" Angle="185" ZIndex="1">
                        <ContentTemplate>
                            <div class="annotationText"><span class="templateAlign">Almaida</span></div>
                        </ContentTemplate>
                    </CircularGaugeAnnotation>
                    <CircularGaugeAnnotation Radius="50%" Angle="180" ZIndex="1">
                        <ContentTemplate>
                            <div class="annotationText"><span class="templateAlign">John</span></div>
                        </ContentTemplate>
                    </CircularGaugeAnnotation>
                </CircularGaugeAnnotations>
            </CircularGaugeAxis>
        </CircularGaugeAxes>
    </SfCircularGauge>
</div>
<style>
    .templateAlign{
        font-size:14px;
        color:#9E9E9E;
        font-family:Regular;
        margin-left: -20px;
    }
    .annotationText {
        margin-top:-30px;
    }
</style>
